import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'
import Taro, {Component, Config} from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import PageProps from '../../../redux'
import { login, logout } from '../../../redux/actions'

import SmallBlackIcon from '../../../images/ic_next_small_black.png'
import MoreIcon from '../../../images/ic_next.png'
import OrderPayIcon from '../../../images/ic_pay.png'
import OrderReceivingIcon from '../../../images/ic_receiving.png'
import OrderReturnIcon from '../../../images/ic_return.png'
import OrderSendOutIcon from '../../../images/ic_send_out.png'

import MenuIntegralIcon from '../../../images/ic_integral.png'
import MenuCollectionIcon from '../../../images/ic_collection.png'
import MenuEvaluateIcon from '../../../images/ic_evaluate.png'
import MenuHelpIcon from '../../../images/ic_help.png'
import MenuCustomerServiceIcon from '../../../images/ic_customer_service.png'
import MenuListIcon from '../../../images/ic_list.png'
import MenuMessageIcon from '../../../images/ic_message.png'
import MenuStatisticsIcon from '../../../images/ic_statistics.png'
import PhoneIcon from '../../../images/ic_phone.png'
import YinHeXiIcon from '../../../images/yinhexi.jpg'


import './index.less'

const { windowWidth } = Taro.getSystemInfoSync()

type PageState = {
  prePayCount: number,
  waitDeliverCount: number,
  waitAcceptCount: number,
}

type PageOwnProps = {}

interface TabBarMinePage {
  props: PageProps & PageOwnProps
}

@connect(({userState}) => ({
  userState
}), (dispatch) => ({
  login(userInfo) {
    dispatch(login(userInfo))
  },
  logout() {
    dispatch(logout())
  }
}))
class TabBarMinePage extends Component<PageOwnProps, PageState> {

  config: Config = {
    navigationBarTitleText: '我的'
  }

  constructor () {
    super(...arguments)
    this.state = {
      prePayCount: 0,
      waitAcceptCount: 0,
      waitDeliverCount: 0
    }
  }

  componentDidShow () {
    this.fetchData()
  }

  fetchData = async () => {
    try {
      let prePayCount = await SDUtils.doGet('/wxmini/order/query/count', {
        orderViewStatusEnums: 'PRE_PAY'
      })
      let waitDeliverCount = await SDUtils.doGet('/wxmini/order/query/count', {
        orderViewStatusEnums: 'PRE_DELIVER'
      })
      let waitAcceptCount = await SDUtils.doGet('/wxmini/order/query/count', {
        orderViewStatusEnums: 'PRE_ACCEPT'
      })
      this.setState({
        prePayCount: prePayCount,
        waitDeliverCount: waitDeliverCount,
        waitAcceptCount: waitAcceptCount
      })
    } catch (e) {

    }
  }

  render () {
    const { userState: {accountInfo = {} as any} } = this.props
    let facadeMediaUrls = (accountInfo.storeInfo || {}).facadeMediaUrls || []
    const { prePayCount = 0, waitAcceptCount = 0, waitDeliverCount = 0 } = this.state
    let picURL = ''
    if (facadeMediaUrls.length > 0) {
      picURL = facadeMediaUrls[0].mediaUrl
    }
    return (
      <SDBody sd-class='container' showPadding={false}>
        <View className="section-header">
          <Image className="bg-icon" src=''></Image>
          <View className="inner-content">
            <Image className="header-pic" src={picURL} mode='aspectFill' lazyLoad onClick={this.gotoStoreInfoPage}></Image>
            <View className="center" onClick={this.gotoStoreInfoPage}>
              <View className="title">{accountInfo.storeInfo.name}</View>
              <View className="sub-title">登录账号：{accountInfo.userName}</View>
              <View className="sub-title">ID:{accountInfo.storeInfo.traderId || 'UNKNOW'}</View>
            </View>
            {
              /** TODO. */
              true ? (<View className="vip-content" onClick={this.gotoMemberLevelPage}>
                <View className="left">
                  <View className="title">VIP等级：{accountInfo.storeInfo.levelName || '普通'}</View>
                  <View className="sub-title">无优惠</View>
                </View>
                <Image className="more-icon" src={SmallBlackIcon}></Image>
              </View>) : null
            }
          </View>
          <View className="setting-content" onClick={this.gotoSettingPage}>
            <View className="setting-btn">设置</View>
          </View>
        </View>
        <View className="section-order">
          <View className="header">
            <View className="left">我的订单</View>
            <View className="right" onClick={this.gotoOrderListPage.bind(this, 'all')}>
              <View className="sub-title">查看全部</View>
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="order-list">
            <View className="order-item" onClick={this.gotoOrderListPage.bind(this, 'pendingPayment')}>
              <Image className="icon" src={OrderPayIcon}></Image>
              <View className="title">待付款</View>
              {
                prePayCount > 0 ? (
                  <View className="unread-content" style={`transform: scale(${windowWidth / 375 < 1 ? windowWidth / 375 : 1}); transform-origin: 0 0;`}>
                    <View className="unread-title">{prePayCount}</View>
                  </View>
                ) : null
              }
            </View>
            <View className="order-item" onClick={this.gotoOrderListPage.bind(this, 'toBeShipped')}>
              <Image className="icon" src={OrderReceivingIcon}></Image>
              <View className="title">待发货</View>
              {
                waitDeliverCount > 0 ? (
                  <View className="unread-content" style={`transform: scale(${windowWidth / 375 < 1 ? windowWidth / 375 : 1}); transform-origin: 0 0;`}>
                    <View className="unread-title">{waitDeliverCount}</View>
                  </View>
                ) : null
              }
            </View>
            <View className="order-item" onClick={this.gotoOrderListPage.bind(this, 'toBeReceived')}>
              <Image className="icon" src={OrderSendOutIcon}></Image>
              <View className="title">待收货</View>
              {
                waitAcceptCount > 0 ? (
                  <View className="unread-content" style={`transform: scale(${windowWidth / 375 < 1 ? windowWidth / 375 : 1}); transform-origin: 0 0;`}>
                    <View className="unread-title">{waitAcceptCount}</View>
                  </View>
                ) : null
              }
            </View>
            <View className="order-item" onClick={this.gotoOrderListPage.bind(this, 'returns')}>
              <Image className="icon" src={OrderReturnIcon}></Image>
              <View className="title">退换货</View>
              {
                false ? (
                  <View className="unread-content" style={`transform: scale(${windowWidth / 375 < 1 ? windowWidth / 375 : 1}); transform-origin: 0 0;`}>
                    <View className="unread-title">99</View>
                  </View>
                ) : null
              }
            </View>
          </View>
        </View>
        <View className="section-ads">
          <Image className="img-content" src={YinHeXiIcon}></Image>
        </View>
        <View className="section-menu">
          <View className="menu-item" onClick={this.gotoFavoritesPage}>
            <Image className="icon" src={MenuCollectionIcon}></Image>
            <View className="title">收藏夹</View>
          </View>
          <View className="menu-item" onClick={this.gotoRegularPurchasePage}>
            <Image className="icon" src={MenuListIcon}></Image>
            <View className="title">常购商品</View>
          </View>
          <View className="menu-item" onClick={this.gotoToBeEvaluatedPage}>
            <Image className="icon" src={MenuEvaluateIcon}></Image>
            <View className="title">待评价</View>
          </View>
          <View className="menu-item" onClick={this.gotoMessageCenterPage}>
            <Image className="icon" src={MenuMessageIcon}></Image>
            <View className="title">消息</View>
            <View className="unread-content" style={`transform: scale(${windowWidth / 375 < 1 ? windowWidth / 375 : 1}); transform-origin: 0 0; top:12rpx; left:90rpx;`}>
              <View className="unread-title">1</View>
            </View>
          </View>
          <View className="menu-item" onClick={this.gotoIntegralPage}>
            <Image className="icon" src={MenuIntegralIcon}></Image>
            <View className="title">积分</View>
          </View>
          <View className="menu-item" onClick={this.gotoStatisticsPage}>
            <Image className="icon" src={MenuStatisticsIcon}></Image>
            <View className="title">订货统计</View>
          </View>
          <View className="menu-item" onClick={this.gotoHelpCenterPage}>
            <Image className="icon" src={MenuHelpIcon}></Image>
            <View className="title">帮助</View>
          </View>
          <Button className="btn-clear menu-item" openType='contact'>
            <Image className="icon" src={MenuCustomerServiceIcon}></Image>
            <View className="title">客服</View>
          </Button>
        </View>
        <View className="section-cell_list">
          <View className="cell-item">
            <View className="title">我的专属BD</View>
            <View className="cell-right">
              <View className="sub-title">王蕾蕾</View>
              <Image className="phone-icon" src={PhoneIcon}></Image>
            </View>
          </View>
        </View>
        <View style='height:70rpx;'></View>
      </SDBody>
    )
  }

  // 进入店铺资料界面
  gotoStoreInfoPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/store/info/index')
  }

  // 进入会员等级界面
  gotoMemberLevelPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/member/level/index')
  }

  // 进入订单列表界面
  gotoOrderListPage = (code: string) => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/order/list/index', {tabBarCode: code})
  }

  // 进入设置界面
  gotoSettingPage = () => {
    SDUtils.jumpTo('/pages/other/setting/index')
  }

  // 进入收藏夹界面
  gotoFavoritesPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/favorites/index')
  }

  // 进入常购商品界面
  gotoRegularPurchasePage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/purchase/index')
  }

  // 进入待评价界面
  gotoToBeEvaluatedPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/evaluate/list/index')
  }

  // 进入消息中心
  gotoMessageCenterPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/message/list/index')
  }

  // 进入积分界面
  gotoIntegralPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/integral/index')
  }

  // 进入统计界面
  gotoStatisticsPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/statistics/index')
  }

  // 进入帮助中心
  gotoHelpCenterPage = () => {
    const checkResult = this.preCheck()
    if (!checkResult) { return }
    SDUtils.jumpTo('/pages/other/help/list/index')
  }

  preCheck = (): boolean => {
    return true
  }
}

export default TabBarMinePage as ComponentClass<PageOwnProps, PageState>
